import * as React from "react";
import PropTypes from "prop-types";

/**
 * 分页组件
 * props: {
 *     pageTotal: {number} 页面总数，默认50,
 *     showCount: {number} 显示分页按钮个数，默认为7,
 *     currentPage: {number} 当前页面，默认0,
 *     onGo: {function(number 页码)} 点击页面回调
 * }
 */
export default class Pagination extends React.Component {
    static propTypes = {
        pageTotal: PropTypes.number,
        showCount: PropTypes.number,
        currentPage: PropTypes.number,
        onGo: PropTypes.func
    };
    static defaultProps = {
        pageTotal: 50,
        showCount: 7,
        currentPage: 0,
        onGo: function () {}
    };
    clickHandler(page){
        if(page < 0) page = 0;
        if(page > this.props.total - 1) page = this.props.total - 1;
        this.props.onGo(page);
    }
    render() {
        //计算开始页面到结束页面
        let halfShowCount = Math.floor(this.props.showCount / 2);
        let startPage,endPage;
        startPage = this.props.currentPage - halfShowCount;
        if(startPage < 0) startPage = 0;
        endPage = startPage + this.props.showCount - 1;
        if(endPage >= this.props.pageTotal){
            endPage = this.props.pageTotal-1;
            startPage = endPage - this.props.showCount + 1;
            if(startPage < 0) startPage = 0;
        }
        let first = startPage === 0;
        let last = endPage >= (this.props.pageTotal - 1);
        //生成分页
        let pages = [];
        pages.push(
            <li
                key="page-first"
                className={"page-item"+(first?" disabled":"")}
                onClick={first?null:this.clickHandler.bind(this, 0)}
                title="首页"
            >
                <span className="page-link">&laquo;</span>
            </li>
        );
        pages.push(
            <li
                key="page-prev"
                className={"page-item"+(first?" disabled":"")}
                onClick={first?null:this.clickHandler.bind(this,this.props.currentPage - this.props.showCount)}
                title={"上"+this.props.showCount+"页"}
            >
                <span className="page-link">&lsaquo;</span>
            </li>
        );
        for(let i=startPage; i<=endPage; i++){
            let isCurrent = this.props.currentPage===i;
            pages.push(
                <li
                    key={i}
                    className={"page-item"+(isCurrent?" active":"")}
                    onClick={isCurrent?null:this.clickHandler.bind(this, i)}
                >
                    <span className="page-link">{i+1}</span>
                </li>
            );
        }
        pages.push(
            <li
                key="page-next"
                className={"page-item"+(last?" disabled":"")}
                onClick={last?null:this.clickHandler.bind(this, this.props.currentPage + this.props.showCount)}
                title={"下"+this.props.showCount+"页"}
            >
                <span className="page-link">&rsaquo;</span>
            </li>
        );
        pages.push(
            <li
                key="page-last"
                className={"page-item"+(last?" disabled":"")}
                onClick={last?null:this.clickHandler.bind(this, this.props.pageTotal - 1)}
                title="末页"
            >
                <span className="page-link">&raquo;</span>
            </li>
        );
        return <ul className={"pagination "+this.props.className} style={this.props.style}>
            {pages}
        </ul>;
    }
}
